<template>
  <div class="layout-container">
    <!-- 左侧侧边栏 - 包含所有内容 -->
    <div
      class="sidebar"
      v-if="!shouldHideSidebar"
      :class="{ 'sidebar-collapsed': isSidebarCollapsed }"
    >
      <!-- 收缩按钮 -->
      <div class="collapse-btn" @click="toggleSidebar">
        <span
          class="collapse-icon"
          :class="isSidebarCollapsed ? 'icon-collapse' : 'icon-expand'"
        ></span>
      </div>

      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo">
          <img src="@/assets/images/LOGO1.png" alt="Logo" class="logo-image" />
        </div>
      </div>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <!-- 平台权限用户显示项目管理 -->
        <div
          v-if="userStore.userInfo.permissions === '平台'"
          class="nav-item"
          :class="{ active: currentRoute === 'project' }"
          @click="navigateTo('project')"
        >
          <span class="nav-inner">
            <span class="nav-icon icon-project"></span>
            <span class="nav-text" v-show="!isSidebarCollapsed">项目管理</span>
          </span>
        </div>

        <!-- 客户权限用户显示客户项目 -->
        <div
          v-if="userStore.userInfo.permissions === '客户'"
          class="nav-item"
          :class="{ active: currentRoute === 'project' }"
          @click="navigateTo('project')"
        >
          <span class="nav-inner">
            <span class="nav-icon icon-project"></span>
            <span class="nav-text" v-show="!isSidebarCollapsed">我的项目</span>
          </span>
        </div>

        <!-- 平台权限用户显示客户管理 -->
        <div
          v-if="userStore.userInfo.permissions === '平台'"
          class="nav-item"
          :class="{ active: currentRoute === 'customer' }"
          @click="navigateTo('customer')"
        >
          <span class="nav-inner">
            <span class="nav-icon icon-customer"></span>
            <span class="nav-text" v-show="!isSidebarCollapsed">客户管理</span>
          </span>
        </div>

        <!-- 平台权限用户显示用户管理 -->
        <div
          v-if="userStore.userInfo.permissions === '平台'"
          class="nav-item"
          :class="{ active: currentRoute === 'user' }"
          @click="navigateTo('user')"
        >
          <span class="nav-inner">
            <span class="nav-icon icon-user"></span>
            <span class="nav-text" v-show="!isSidebarCollapsed">用户管理</span>
          </span>
        </div>
      </nav>

      <!-- 消息盒子 -->
      <div class="message-box" v-if="showMessage && !isSidebarCollapsed">
        <h3 class="message-title">消息盒</h3>

        <div class="message-list">
          <div class="message-item">
            <div class="message-content">
              <span class="message-text">XXX完成XXXXX</span>
              <span class="message-time">1分钟前</span>
            </div>
          </div>
          <div class="message-item">
            <div class="message-content">
              <span class="message-text">XXXXX届求XXXXX</span>
              <span class="message-time">1分钟前</span>
            </div>
          </div>
          <div class="message-item">
            <div class="message-content">
              <span class="message-text">XXX完成XXXXX</span>
              <span class="message-time">8分钟前</span>
            </div>
          </div>
          <div class="message-item">
            <div class="message-content">
              <span class="message-text">XXXXX届求XXXXX</span>
              <span class="message-time">10分钟前</span>
            </div>
          </div>
        </div>

        <div class="message-footer">
          <span class="clear-all">清空所有</span>
          <span class="view-all">查看所有消息 ></span>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="sidebar-bottom">
        <!-- <button class="message-reminder" @click="isShowMessage">
          <el-icon v-if="isSidebarCollapsed" :size="16">
            <Bell />
          </el-icon>
          <span v-show="!isSidebarCollapsed">消息提醒</span>
        </button> -->
        <button class="logout-btn" @click="handleLogout">
          <el-icon v-if="isSidebarCollapsed" :size="16">
            <SwitchButton />
          </el-icon>
          <span v-show="!isSidebarCollapsed">退出登录</span>
        </button>
      </div>
    </div>

    <!-- 右侧主内容区域 - 空白 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Expand, Fold, Bell, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 用户状态管理
const userStore = useUserStore()

// 当前激活的路由
const currentRoute = ref('project')

// 是否隐藏侧边栏（当客户查看项目详情时）
const shouldHideSidebar = computed(() => {
  return route.query.hideSidebar === 'true'
})

const showMessage = ref(false)

// 侧边栏收缩状态
const isSidebarCollapsed = ref(false)

// 切换侧边栏收缩状态
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 导航方法
const navigateTo = (routeName) => {
  currentRoute.value = routeName
  router.push({ name: routeName })
}

// 监听路由变化，更新当前激活状态
watch(
  () => route.name,
  (newRouteName) => {
    if (newRouteName) {
      // 如果当前路由是创建项目页面或项目详情页面，保持项目管理为激活状态
      if (newRouteName === 'createProject' || newRouteName === 'projectDetail') {
        currentRoute.value = 'project'
      } else {
        currentRoute.value = newRouteName
      }
    }
  },
)

// 监听路由查询参数变化，自动收缩侧边栏
watch(
  () => route.query.collapseSidebar,
  (newValue) => {
    if (newValue === 'true') {
      isSidebarCollapsed.value = true
    }
  },
  { immediate: true },
)

// 组件挂载时设置初始路由
onMounted(() => {
  if (route.name) {
    // 如果当前路由是创建项目页面或项目详情页面，保持项目管理为激活状态
    if (route.name === 'createProject' || route.name === 'projectDetail') {
      currentRoute.value = 'project'
    } else {
      currentRoute.value = route.name
    }
  }

  // 根据用户权限设置默认路由
  if (userStore.userInfo.permissions === '客户') {
    currentRoute.value = 'project'
  } else if (userStore.userInfo.permissions === '平台') {
    currentRoute.value = 'project'
  }
})

const isShowMessage = () => {
  showMessage.value = !showMessage.value
}

// 退出登录处理
const handleLogout = async () => {
  try {
    // 显示二次确认对话框
    await ElMessageBox.confirm('确定要退出登录吗？', '退出确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    })

    // 用户确认后，执行退出登录
    userStore.logout()

    // 显示成功提示
    ElMessage.success('已成功退出登录')

    // 跳转到登录页面
    router.push('/login')
  } catch (error) {
    // 用户取消退出，不做任何操作
    if (error !== 'cancel') {
      console.error('退出登录失败:', error)
      ElMessage.error('退出登录失败，请重试')
    }
  }
}
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 107vh; /* 从 100vh 改为 90vh，缩短10% */
  /* background: linear-gradient(135deg, #f5e6f3 0%, #e8d5f0 50%, #dcc4ed 100%); */
  font-family:
    'Microsoft YaHei',
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  min-width: 0; /* 防止flex子项溢出 */
  transform: scale(0.9); /* 整体缩小10% */
  transform-origin: top left; /* 从左上角开始缩放 */
  width: 111.11%; /* 补偿缩放后的宽度 (100% / 0.9) */
}

/* 左侧侧边栏样式 */
.sidebar {
  flex: 0 0 15.789%;
  /* padding: 0 0 30px 0; */
  background: transparent; /* 移除背景色 */
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 300px;
  position: relative;
  transition: all 0.3s ease;
}

/* 使用伪元素创建背景，不包含padding区域 */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30px; /* 排除底部padding区域 */
  background: linear-gradient(135deg, #ecdae6 0%, #fae6e8 50%, #dde3f3 100%);
  z-index: -1;
}

/* 收缩状态下的侧边栏 */
.sidebar-collapsed {
  flex: 0 0 80px;
  min-width: 80px;
  max-width: 80px;
}

/* 收缩按钮样式 */
.collapse-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.collapse-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: #666;
  transition: all 0.3s ease;
}

.icon-collapse {
  mask-image: url('@/assets/images/向右收缩.svg');
  -webkit-mask-image: url('@/assets/images/向右收缩.svg');
}

.icon-expand {
  mask-image: url('@/assets/images/向左收缩.svg');
  -webkit-mask-image: url('@/assets/images/向左收缩.svg');
}

.collapse-btn:hover .collapse-icon {
  background-color: #ec499b;
}

.logo-section {
  padding: 30px 20px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0; /* 防止logo区域被压缩 */
}

/* 收缩状态下隐藏Logo */
.sidebar-collapsed .logo-section {
  display: none;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0; /* 防止内容溢出 */
}

.logo-image {
  max-width: 160px;
  height: auto;
  width: 100%; /* 响应式图片 */
}

/* 导航菜单样式 */
.nav-menu {
  padding: 16px 0;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: start;
  align-items: center;
  flex: 1; /* 占据剩余空间 */
  min-width: 0; /* 防止内容溢出 */
}

/* 收缩状态下的导航菜单 */
.sidebar-collapsed .nav-menu {
  margin-top: 20px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 16px 20px; /* 增加水平内边距 */
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  font-size: 18px;
  position: relative;
  width: 100%; /* 占满父容器 */
  max-width: 200px; /* 限制最大宽度 */
  justify-content: center;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 收缩状态下的导航项 */
.sidebar-collapsed .nav-item {
  padding: 16px 10px;
  max-width: 60px;
  justify-content: center;
}

.sidebar-collapsed .nav-inner {
  flex-direction: column;
  gap: 5px;
}

.nav-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap; /* 防止文字换行 */
}

.nav-item.active .nav-inner {
  border-bottom-color: #ec539e;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #333;
}

.nav-item.active {
  background: transparent;
  color: #ec499b;
  font-weight: 500;
}

.nav-item.active .nav-icon {
  background-color: #ec499b;
}

.nav-item.active::before {
  content: none;
}

.nav-icon {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: #999;
  flex-shrink: 0; /* 防止图标被压缩 */
}

.icon-project {
  mask-image: url('@/assets/images/文件夹.svg');
  -webkit-mask-image: url('@/assets/images/文件夹.svg');
}

.icon-customer {
  mask-image: url('@/assets/images/客户群组.svg');
  -webkit-mask-image: url('@/assets/images/客户群组.svg');
}

.icon-user {
  mask-image: url('@/assets/images/icon-user.svg');
  -webkit-mask-image: url('@/assets/images/icon-user.svg');
}

.nav-text {
  flex: 1;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出显示省略号 */
}

/* 消息盒子样式 */
.message-box {
  margin: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  flex-shrink: 0; /* 防止被压缩 */
}

.message-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  white-space: nowrap; /* 防止标题换行 */
}

.message-list {
  margin-bottom: 15px;
}

.message-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.message-item:last-child {
  border-bottom: none;
}

.message-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* 添加间距 */
  min-width: 0; /* 防止内容溢出 */
}

.message-text {
  color: #666;
  font-size: 13px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出显示省略号 */
}

.message-time {
  color: #999;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0; /* 防止时间被压缩 */
}

.message-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  gap: 10px; /* 添加间距 */
}

.clear-all {
  color: #999;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0; /* 防止被压缩 */
}

.clear-all:hover {
  color: #666;
}

.view-all {
  color: #ff69b4;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0; /* 防止被压缩 */
}

.view-all:hover {
  color: #e55aa0;
}

/* 侧边栏底部按钮 */
.sidebar-bottom {
  margin-top: auto;
  margin-bottom: 40px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-shrink: 0; /* 防止被压缩 */
}

.message-reminder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f3f2f8;
  color: #666;
  border: none;
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto;
  align-self: center;
  white-space: nowrap; /* 防止文字换行 */
  flex-shrink: 0; /* 防止被压缩 */
}

/* 收缩状态下的按钮 */
.sidebar-collapsed .message-reminder,
.sidebar-collapsed .logout-btn {
  padding: 8px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  justify-content: center;
}

.sidebar-collapsed .message-reminder .el-icon,
.sidebar-collapsed .logout-btn .el-icon {
  color: #666;
}

.sidebar-collapsed .message-reminder:hover .el-icon,
.sidebar-collapsed .logout-btn:hover .el-icon {
  color: #ec499b;
}

.message-reminder:hover {
  background: #ebe9f0;
  transform: translateY(-1px);
}

.reminder-icon {
  font-size: 16px;
}

.logout-btn {
  background: #f3f2f8;
  color: #666;
  border: none;
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  width: auto;
  align-self: center;
  white-space: nowrap; /* 防止文字换行 */
  flex-shrink: 0; /* 防止被压缩 */
}

.logout-btn:hover {
  background: #ebe9f0;
  transform: translateY(-1px);
}

/* 右侧主内容区域 */
.main-content {
  flex: 1; /* 占据剩余空间 (16/19 ≈ 84.211%) */
  background: #ffffff;
  min-width: 0; /* 防止内容溢出 */
  scrollbar-width: none; /* Firefox 隐藏 */
  -ms-overflow-style: none; /* IE/旧 Edge 隐藏 */
}

/* 响应式设计 - 使用flex弹性布局 */
@media (max-width: 1200px) {
  .sidebar {
    flex: 0 0 18%; /* 在小屏幕上稍微增加比例 */
    min-width: 220px;
  }
}

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
    min-height: 100vh; /* 改为最小高度 */
  }

  .sidebar {
    flex: 0 0 auto; /* 高度自适应 */
    width: 100%;
    max-height: 200px; /* 限制最大高度 */
    overflow-y: auto;
  }

  .logo-section {
    padding: 15px 20px 10px 20px;
  }

  .nav-menu {
    margin-top: 10px;
    flex-direction: row; /* 水平排列 */
    justify-content: space-around;
    padding: 10px;
    gap: 5px;
  }

  .nav-item {
    max-width: none;
    padding: 10px 5px;
    font-size: 14px;
  }

  .nav-inner {
    flex-direction: column; /* 图标在上文字在下 */
    gap: 5px;
  }

  .message-box {
    display: none; /* 隐藏消息盒子 */
  }

  .sidebar-bottom {
    display: none; /* 隐藏底部按钮 */
  }

  .main-content {
    flex: 1; /* 占据剩余空间 */
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .nav-menu {
    flex-wrap: wrap; /* 允许换行 */
    gap: 2px;
  }

  .nav-item {
    flex: 1 1 auto; /* 弹性伸缩 */
    min-width: 80px; /* 最小宽度 */
    padding: 8px 4px;
    font-size: 12px;
  }

  .nav-icon {
    width: 14px;
    height: 14px;
  }
}
</style>
